<script setup lang="ts">
import { computed } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useCartStore } from '@/stores/cart'
import { checkAllShoppingCartAPI, deleteShoppingCartAPI, updateShoppingCartAPI } from '@/api/cart'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'

const { cartList, selectedCartList } = storeToRefs(useCartStore())
const { getCartList } = useCartStore()

// 全选
const isAllChecked = ref(false)

// 购物车商品列表
onMounted(async () => {
  await getCartList()
  isAllChecked.value = cartList.value.every((item: any) => item.checked)
})

const handleChangeChecked = async (product: any) => {
  isAllChecked.value = cartList.value.every((item: any) => item.checked)
  const res = await updateShoppingCartAPI({
    productId: product.id,
    product
  })
}
const handleChangeAllChecked = async () => {
  cartList.value.forEach((item: any) => (item.checked = !isAllChecked.value))
  await checkAllShoppingCartAPI({ value: !isAllChecked.value })
}
const numTotal = computed(() => selectedCartList.value.reduce((pre: any, cur: any) => pre + cur.goodsNum, 0))
const priceTotal = computed(() =>
  selectedCartList.value.reduce((pre: any, cur: any) => pre + cur.goodsNum * cur.price, 0)
)

const baseURL = import.meta.env.VITE_BASE_URL

const handleDelGoods = async (productId: number) => {
  console.log(productId)
  await deleteShoppingCartAPI(productId)
  getCartList()
}

const handleChangeNum = async (productId: number, product: any) => {
  console.log(productId)
  const res = await updateShoppingCartAPI({
    productId,
    product
  })
  getCartList()
}

const router = useRouter()
const handleToCheckoutPage = () => {
  if (selectedCartList.value.length === 0) {
    Message.error('您还未选择商品')
    return
  }

  router.push({ name: 'checkOrder' })
}
</script>

<template>
  <div class="w-1280px mx-auto mb-10">
    <div>
      <StepsBar title="我的购物袋" :current="0" />
    </div>
    <div class="grid p-4 bg-#f9f9f9 items-center mt-4 text-4 grid-cols">
      <div>
        <a-checkbox v-model="isAllChecked" @click="handleChangeAllChecked">全选</a-checkbox>
      </div>
      <div class="text-center">商品</div>
      <div class="text-center">单价</div>
      <div class="text-center">数量</div>
      <div class="text-center">小计</div>
      <div class="text-center">操作</div>
    </div>

    <div class="flex flex-col">
      <div
        v-for="(item, index) in cartList"
        :key="item.id"
        class="grid p-2 items-center text-4 goods-grid-cols border-b border-b-gray-1"
        :class="{ 'border-b-solid': index !== 2 }"
      >
        <div class="flex gap-4">
          <div class="flex items-center gap-2">
            <a-checkbox v-model="item.checked" @change="handleChangeChecked(item)"></a-checkbox>
            <img class="w-30 h-30" :src="baseURL + item.cover" alt="" />
          </div>
          <div>
            <p class="text-4">{{ item.name }}</p>
            <p class="color-gray mt-2">单位：{{ item.model }}</p>
          </div>
        </div>
        <div class="text-center text-gray-8">{{ item.price }}</div>
        <div class="text-center text-gray-8 px-5">
          <a-input-number
            class="w-full"
            placeholder="数量"
            size="large"
            v-model="item.goodsNum"
            @change="handleChangeNum(item.id, item)"
            :default-value="1"
            :min="1"
            :max="item.stock"
            mode="button"
          />
        </div>
        <div class="text-center text-error">¥ {{ +item.price * item.goodsNum }}</div>
        <div class="text-center cursor-pointer text-gray-8">
          <icon-close
            @click="handleDelGoods(item.id)"
            size="24"
            class="hover:text-red-4 hover:bg-red hover:text-white transition-all transition-500 rounded-full p-1"
          />
        </div>
      </div>
      <div v-if="cartList.length === 0">
        <a-empty class="h-200px flex flex-col items-center justify-center" description="赶快去选择心仪的商品吧！" />
      </div>
    </div>

    <div class="flex bg-#f9f9f9 items-center text-4 justify-between">
      <div class="ml-4 flex items-center gap-10">
        <a-checkbox v-model="isAllChecked" @click="handleChangeAllChecked">全选</a-checkbox>
        <!-- <span class="cursor-pointer text-gray-7">删除选中商品</span> -->
      </div>
      <div class="flex items-center gap-6">
        <div>
          总计: <span class="text-error">¥ {{ priceTotal }}</span>
        </div>
        <a-button @click="handleToCheckoutPage" class="w-60 h-18 bg-primary! color-white! hover:opacity-85! text-2xl"
          >结算({{ numTotal }})</a-button
        >
      </div>
    </div>
  </div>
</template>

<style scoped>
.grid-cols {
  grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr;
}

.goods-grid-cols {
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  column-gap: 0px;
}

:deep(.arco-checkbox-checked .arco-checkbox-icon) {
  background-color: #76a5af;
}

:deep(.arco-input) {
  text-align: center;
  font-size: 16px;
}

:deep(.arco-input-wrapper.arco-input-focus) {
  background-color: #fff;
  border-color: rgb(118, 165, 175, 0.7);
}
</style>
